<template>
  <!-- 轮播图区域 -->
  <div class="header_bg">
    <div class="w">
      <div class="top" @mouseleave="isHoveringId = ''">
        <div class="categorys">
          <!-- 10 -->
          <div
            class="category"
            :class="{ menu_item_on: isHoveringId === subject.subjectId }"
            v-for="subject in subjects"
            :key="subject.subjectId"
            @mouseenter="mouseenterSubject(subject)"
            @click="handleSubjectPId(subject.subjectId)"
          >
            {{ subject.title }}
          </div>
        </div>
        <div class="banner_box">
          <div class="submenu" v-show="isHoveringId">
            <div class="inner">
              <h2 class="text_type">
                {{ hoveringData.title }}
              </h2>
              <div class="flex">
                <div
                  class="child_item"
                  v-for="item in hoveringData.children"
                  :key="item.subjectId"
                  @click="handleSubjectId(item.subjectId, item.pid)"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
          <el-carousel height="370px">
            <el-carousel-item v-for="item in bannerList" :key="item">
              <img :src="item" alt="" class="img" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
  <!-- 为你推荐 -->
  <div class="w w-card">
    <div class="recommend-title">
      <i class="recommend-icon"></i>
      为你推荐
    </div>
    <div class="course-list">
      <div
        class="course-item"
        v-for="course in courseList"
        :key="course.courseId"
      >
        <router-link :to="`/course/${course.courseId}`">
          <div class="course-item-img">
            <img :src="course.coverUrl" alt="课程封面" />
          </div>
          <div class="course-item-content">
            <h3>{{ course.title }}</h3>
            <div class="course-item-content-footer">
              <span class="footer-price-free" v-if="course.price == 0">
                免费
              </span>
              <span class="footer-price-pay" v-else>￥{{ course.price }}</span>
              <span class="footer-study">总共{{ course.lessonNum }}课时</span>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqV2Index12 } from '@/api/course'
import { Course } from '@/api/course/type'
import { reqSubjectTree } from '@/api/subject'
import type { SubjectTree } from '@/api/subject/type'

let bannerList = ref<string[]>([
  'https://img1.sycdn.imooc.com/661899d900011e3016000682.jpg',
  'https://img1.sycdn.imooc.com/6618a82c0001d8dd17920764.jpg',
])
let router = useRouter()
/* 悬浮id */
/* 悬浮对象 */
const hoveringData = ref<any>({})
let isHoveringId = ref<string>('')
let subjects = ref<SubjectTree[]>([])
let courseList = ref<Course[]>([])

const getSubjectTree = async () => {
  let { data } = await reqSubjectTree()
  subjects.value = data
}

const mouseenterSubject = (subject: SubjectTree) => {
  isHoveringId.value = subject.subjectId
  hoveringData.value = subject
}

const handleSubjectPId = (pid: string) => {
  router.push({
    path: '/course',
    query: {
      pid,
    },
  })
}

const handleSubjectId = (subjectId: string, pid: string) => {
  router.push({
    path: '/course',
    query: {
      subjectId,
      pid,
    },
  })
}

const getIndex12Course = async () => {
  let { rows } = await reqV2Index12()
  courseList.value = rows
}

onMounted(() => {
  getSubjectTree()
  getIndex12Course()
})
</script>

<style scoped lang="scss">
.header_bg {
  overflow: hidden;
  margin: 0 0;
  height: 400px;
  background-color: rgb(32, 128, 247);
  background-image: url('@/assets/images/home-bg.png');
  .top {
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 80, 179, 0.08);
    display: flex;
    margin: 5px 0;
    height: 370px;
    .categorys {
      width: 200px;
      height: 100%;
      .category {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 9px 10px;
        color: #000;
        font-weight: 700;
        &:hover {
          color: blueviolet;
        }
      }
      .menu_item_on {
        background: rgba(32, 128, 247, 0.1);
        border-radius: 6px;
      }
    }

    .banner_box {
      position: relative;
      margin-left: 10px;
      width: 100%;
      .submenu {
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
        border-radius: 0 12px 12px 0;
        background-color: #fff;
        top: 0;
        left: 0;
        width: 800px;
        height: 370px;
        position: absolute;
        z-index: 2;
        .inner {
          padding: 28px 36px 0;
          .text_type {
            margin-bottom: 10px;
            font-size: 16px;
            color: #1c1f21;
            line-height: 22px;
            font-weight: bold;
          }
          .child_item {
            margin: 5px 10px 0 10px;
            color: #6d7278;
            &:hover {
              color: blueviolet;
            }
          }
        }
      }
      .img {
        width: 100%;
        height: 370px;
      }
    }
  }
}
.category,
.child_item {
  cursor: pointer;
}
.recommend-title {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  color: #3e454d;
  padding: 4px 13px 4px 12px;
  .recommend-icon {
    margin-right: 6px;
    display: inline-block;
    width: 36px;
    height: 36px;
    background-size: cover;
    background-image: url('@/assets/images/icon-recommend.png');
  }
}
/* 课程列表 */
.course-list {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  .course-item {
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 80, 179, 0.08);
    transition: all 0.2s linear;
    &:hover {
      color: #2080f7;
      box-shadow: 0 8px 30px rgba(0, 80, 179, 0.12);
    }
    .course-item-img {
      overflow: hidden;
      border-radius: 8px;
      img {
        width: 100%;
        border-radius: 8px;
        transition: all 0.2s linear;
        &:hover {
          transform: scale(1.05);
        }
      }
    }
    .course-item-content {
      flex-direction: column;
      display: flex;
      justify-content: space-between;
      padding: 8px 12px 16px 12px;
      h3 {
        margin: 0 0;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .course-item-content-footer {
        margin-top: 10px;
        font-size: 16px;
        line-height: 19px;
        .footer-price-free {
          margin-right: 6px;
          color: #463f3c;
        }
        .footer-price-pay {
          margin-right: 6px;
          color: red;
        }
        .footer-study {
          font-size: 14px;
          line-height: 20px;
          color: #a1a9b2;
        }
      }
    }
  }
}
</style>
